<template>
  <el-card>
    <el-form inline class="cartgroy-select-form" :disabled="disabled">
      <el-form-item label="一级分类">
        <!-- 
                  必须绑定v-model收集数据，才能选中值
             -->
        <el-select placeholder="请选择" v-model="cartgroyStroe.cartgroy1Id">
          <!-- 
            label  显示的内容
            value  选中的值
          -->
          <el-option
            v-for="item in cartgroyStroe.cartgroy1List"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select placeholder="请选择" v-model="cartgroyStroe.cartgroy2Id">
          <el-option
            v-for="item in cartgroyStroe.cartgroy2List"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            ref="cartgroy2"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select placeholder="请选择" v-model="cartgroyStroe.cartgroy3Id">
          <el-option
            v-for="item in cartgroyStroe.cartgroy3List"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            ref="cartgroy3"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "CartgroySelect",
};
</script>

<script lang="ts" setup>
import { onMounted, watch, onBeforeUnmount } from "vue";
import { useCartgroyStroe } from "@/stores/cartgroy";

const cartgroyStroe = useCartgroyStroe();
defineProps<{
  disabled: boolean;
}>();

onMounted(() => {
  cartgroyStroe.getcartgroy1List();
});

onBeforeUnmount(() => {
  cartgroyStroe.$reset();
});

/******************************* 请求分类数据展示列表 **********************************/
// 监视1级分类Id
// 当一级分类选择后请求二级分类数据
watch(
  () => cartgroyStroe.cartgroy1Id,
  async (newVal) => {
    if (!newVal) return;
    cartgroyStroe.getcartgroy2List(newVal as number);
  }
);

// 监视二级分类Id
// 当二级分类选择后请求三级分类数据
watch(
  () => cartgroyStroe.cartgroy2Id,
  async (newVal) => {
    if (!newVal) return;
    cartgroyStroe.getcartgroy3List(newVal as number);
  }
);
</script>

<style scoped>
.cartgroy-select-form :deep(.el-form-item) {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
